import { type Directive } from "vue"
import { useUserStore } from "../store/user"

export const permission: Directive = {
    mounted(el, binding) {
        const valueArr = binding.value // 权限字符串数组
        const userStore = useUserStore()
        const permissionCodeList = userStore.getPermissionCodeList // 用户拥有的权限字符串数组

        if (!valueArr || !(valueArr instanceof Array) || valueArr.length < 1) {
            throw new Error(`v-permission指令的值必须是数组，且至少要有一个值👉例如：v-permission="['sys:user:add']"`)
        } else {
            // 要是数组里至少有一个元素能通过特定函数的测试，它就会返回true；要是所有元素都没通过测试，就返回false。
            const hasPermisson = permissionCodeList.some((role) => {
                return valueArr.includes(role)
            })
            // 如果没有权限，隐藏按钮
            if (!hasPermisson) {
                // el.style.display = 'none'
                el.remove()
            }
        }
    }
}